<script lang="ts" setup>

withDefaults(defineProps<{
  styles?: object,
  size?: number,
  text? :string,
  textSize?: number,
}>(), {
  styles: () => ({}),
  size: 40,
  textSize:13
})
</script>

<template>
  <view :style="styles" class="loader-box">
    <view :style="{ width: size+'px', height: size+'px'}" class="loader">
      <image mode="aspectFit" src="/static/loader.png"></image>
    </view>
    <text class="text-gray" :style="{fontSize:textSize+'px'}">{{text}}</text>
    <slot class="slot">

    </slot>
  </view>
</template>

<style lang="scss" scoped>
.loader-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 30px;
  padding-bottom: 20px;
  z-index: 9999999;
  background-color: rgba(255, 255, 255, 0);
  gap: 3px;
}

.loader {


  image {
    width: 100%;
    height: 100%;
    animation: rotate 1.5s linear infinite;
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}

.slot {
  width: 100%;
  padding-top: 20px;
  min-height: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>